<template>
  <!-- 登录 -->
  <view>
    <view class="tac">
      <view class="logo p10">
        <image
          style="width: 100%"
          src="/static/common/logo.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="tips">喜牛庭生鲜</view>
      <!-- 微信一键登录 -->
      <view>
        <button
          open-type="getPhoneNumber"
          class="wx-login"
          @getphonenumber="wechatLogin"
        >
          手机号快捷登录
        </button>
		<!-- <view class="p10 pt-10">
			<u-cell-group>
					<u-input v-model="formData.phone" :type="number" :border="border" />
					<u-button @click="loginByPhone">手机号登录</u-button>
			</u-cell-group>
		</view> -->
        <!-- <button v-else class="wx-login" @click="loginSuccess(resData)">手机号快捷登录</button> -->
      </view>
      <!-- 微信头像昵称登录 -->
      <!-- <view>
				<button class="wx-login" @click="changeShowLogin()">头像昵称登录</button>
			</view> -->
      <view class="agreement-box">
        <view class="ag-box" @click="tabAgree">
          <image v-if="isAgree" src="/static/common/select.png" mode=""></image>
          <image v-else src="/static/common/noSelect.png" mode=""></image>
        </view>
        <view class="agreement">
          <text @click.stop="tabAgree">我已阅读并同意</text>
          <text class="primary-color" @click.stop="jumpPage(1)"
            >《用户协议》</text
          >
          <text class="primary-color" @click.stop="jumpPage(2)"
            >《隐私协议》</text
          >
        </view>
      </view>
    </view>

    <u-popup
      :show="showLogin"
      @close="this.showLogin = false"
      mode="bottom"
      :round="20"
      :closeable="true"
    >
      <view class="popu">
        <view class="popu-top"> 登录信息 </view>
        <view class="popu-main">
          <button
            class="u-reset-button"
            open-type="getPhoneNumber"
            @getphonenumber="onGetPhoneNumber"
          >
            <!-- <view class="popu-box">
						<view class="left">
							<text>绑定手机</text>
						</view>
						
						<view class="right">
							<text v-if="formData.phone">{{formData.phone}}</text>
							<text v-else>未绑定</text>
						</view>
					</view> -->
          </button>
          <button
            class="u-reset-button avatar"
            type="balanced"
            open-type="chooseAvatar"
            @chooseavatar="onChooseAvatar"
          >
            <view class="popu-box">
              <view class="left"> 头像 </view>
              <view class="right">
                <image class="avatar" :src="formData.avatarUrl"></image>
              </view>
            </view>
          </button>
          <view class="popu-box">
            <view class="left"> 昵称 </view>
            <view class="right">
              <input
                type="nickname"
                class="weui-input"
                placeholder="请输入昵称"
                v-model="formData.nickName"
                @change="getNickname"
              />

              <!-- 	<u--input type="nickname" border="none" :clearable='false' v-model="formData.nickName" class="weui-input"
								placeholder="请输入昵称" input-align='right' @change="getNickname"/> -->
            </view>
          </view>
        </view>
        <view class="popu-footer" @click="wechatNameLogin"> 登录 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      count: "",
      show: true,
      account: "",
      timer: "",
      pass: "",
      needWechatPhone: false,
      resData: "",
      isAgree: false,
      loginCode: "",
      showLogin: false,
      formData: {
        phone: "",
        avatarUrl: "",
        nickName: "",
      },
    };
  },
  created() {
    // this.creatLogin();
  },
  methods: {
	  loginByPhone() {
		  if (!this.isAgree) {
		    return uni.showToast({
		      title: "请先查看并同意协议",
		      icon: "none",
		      duration: 2000,
		    });
		  }
		  this.$api.loginTest({phone:this.formData.phone}).then(res=>{
			  this.loginSuccess(res)
		  })
	  },
    openPdf(url) {
      uni.downloadFile({
        url: url,
        success: function (res) {
          console.log(res, "res");
          let filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              // console.log('打开文档成功');
              console.log(res, "打开文档成功");
              uni.hideLoading();
            },
          });
        },
        fail(err) {
          console.log("打开文档失败", err);
          uni.hideLoading();
        },
      });
    },

    // 同意/不同意协议
    tabAgree() {
      this.isAgree = !this.isAgree;
    },
    // 初始登录获取openid
    creatLogin(e) {
      const that = this;
      uni.login({
        provider: "weixin", //使用微信登录
        success(loginRes) {
          console.log(loginRes, "使用微信登录");
          that.loginCode = loginRes.code;

          if (!that.isAgree) {
            return uni.showToast({
              title: "请先查看并同意协议",
              icon: "none",
              duration: 2000,
            });
          }
          if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
            uni.showToast({
              title: "用户拒绝授权",
              icon: "none",
              duration: 2000,
            });
            return;
          }
          let from = {
            phoneCode: e.detail.code,
            loginCode: that.loginCode,
          };
		  const sharerId = wx.getStorageSync("sharerId")
		  if (sharerId != null) {
			  from['promoter'] = sharerId
		  }
          that.$api.loginY(from).then((res2) => {
            that.loginSuccess(res2);
          });
        },
        fail() {
          uni.hideLoading();
        },
      });
    },
    getNickname(e) {
      this.formData.nickName = e.detail.value;
    },
    // 登录成功
    loginSuccess(res) {
      console.log(res, "登录信息");
      if (!this.isAgree) {
        return uni.showToast({
          title: "请先查看并同意协议",
          icon: "none",
          duration: 2000,
        });
      }
      if (res.code == 200) {
        uni.hideLoading();
        uni.showToast({
          title: "登录成功！",
          icon: "none",
          duration: 2000,
        });
        this.$u.vuex("vuex_token", res.data.token);
        // uni.setStorageSync('token', res.data.accessToken);
        // uni.setStorageSync('user', res.data.detail);
        uni.setStorageSync("user", res.data);
        let url = `/pages/tabbar/home?newCoupon=${res.data.newPeople}`;
        setTimeout(() => {
          uni.reLaunch({
            url,
          });
        }, 500);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          icon: "none",
          duration: 2000,
        });
      }
    },

    changeShowLogin() {
      if (!this.isAgree) {
        return uni.showToast({
          title: "请先查看并同意协议",
          icon: "none",
          duration: 2000,
        });
      }
      this.showLogin = true;
    },
    onGetPhoneNumber(e) {
      console.log(e);
    },
    onChooseAvatar(e) {
      console.log(e);
      this.formData.avatarUrl = e.detail.avatarUrl;
    },
    // 跳转到协议
    jumpPage(type) {
      this.isAgree = true;
      // uni.navigateTo({
      // 	url: `/pages/tabbar/agreement?type=${type}`
      // })
      if (type == 1) {
        this.$api.userAgreement({}).then((res) => {
          console.log(res, "用户协议");
          this.userAgreement = res.data;
          this.openPdf(res.data);
        });
      } else {
        this.$api.getAgreement({}).then((res) => {
          console.log(res, "隐私协议");
          this.getAgreement = res.data;
          this.openPdf(res.data);
        });
      }
    },
    // 微信一键登录
    wechatLogin(e) {
      uni.showLoading({
        mask: true,
      });
      this.creatLogin(e);
    },
    wechatNameLogin() {
      // console.log(this.formData);
      this.showLogin = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.logo {
  margin-top: 240rpx;
  text-align: center;
}

.title {
  margin-top: 56rpx;
  font-size: 48rpx;
  font-weight: bold;
  color: #020d1a;
}

.tips {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #1a1a1a;
}

.wx-login {
  margin-top: 80rpx;
  width: 640rpx;
  height: 96rpx;
  background: $c-bgColor;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  font-size: 32rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;

  .weixin {
    width: 48rpx;
    height: 46rpx;
    margin-right: 12rpx;
  }
}

.ple-login {
  padding: 40rpx 0rpx 85rpx;
  text-align: left;

  .inp-box {
    padding: 60rpx 0rpx 30rpx;
    margin: 0 70rpx;
    border-bottom: 1rpx solid #d8dee6;
    position: relative;

    .phe-icon {
      position: absolute;
      top: 66rpx;
      left: 0;
      width: 28rpx;
      height: 28rpx;
    }

    input {
      padding-left: 60rpx;
    }
  }

  .login {
    margin-top: 100rpx;
    width: 640rpx;
    height: 96rpx;
    background: #04c15f;
    border-radius: 20rpx;
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;

    &.unsatisfied {
      background: #e3e3e3;
      color: #9da0a5;
    }
  }

  .tab {
    margin-bottom: 75rpx;
  }
}

.tab {
  margin-top: 40rpx;
  margin-bottom: 500rpx;
  text-align: center;
  font-size: 28rpx;
  color: #888990;
}

.agreement-box {
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  .ag-box {
    width: 50rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  image {
    width: 24rpx;
    height: 24rpx;
  }

  .agreement {
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;

    .primary-color {
      color: #4562c9;
    }
  }
}

.popu {
  .popu-top {
    padding: 30rpx;
    color: #353b55;
    font-size: 32rpx;
    font-weight: 700;
  }

  .popu-title {
    padding: 30rpx;
    background: #fafafa;
    color: #8f8f8f;
    font-size: 28rpx;
  }

  .popu-main {
    .popu-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #d7d9db;
      color: #353b55;
      font-size: 32rpx;
      font-weight: 700;

      .avatar {
        background: #d7d9db;

        width: 80rpx;
        height: 80rpx;
        border-radius: 80rpx;
      }

      .weui-input {
        text-align: right;
      }
    }
  }

  .popu-footer {
    width: 690rpx;
    height: 88rpx;
    background: $c-bgColor;
    border: none;
    border-radius: 20rpx;
    line-height: 88rpx;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 32rpx;
    margin: 40rpx auto;
  }
}
</style>
